jQuery |
您所在的位置:网站首页 › jquery 获取指定子元素 › jQuery |
① $(this).next(); 获取的是当前元素的下一个兄弟元素 ②$(this).nextAll(); 获取的是当前元素的后面的所有的兄弟元素 ③$(this).prev(); 获取的是当前元素的前一个兄弟元素 ④$(this).prevAll(); 获取的是当前元素的前面的所有的兄弟元素 ⑤$(this).siblings(); 获取的是当前元素的所有的兄弟元素(自己除外)
案例练习: 需求分析:鼠标进入文字,当前文字背景变红色,当点击时候,当前文字前面文字背景颜色变为黄色,后面文字背景颜色变为蓝色,当鼠标移出时,所有背景颜色取消 效果:
代码如下: 1 2 3 4 5 Title 6 7 ul { 8 list-style-type: none; 9 width: 200px; 10 margin: 100px auto; 11 } 12 13 ul li { 14 margin-top: 10px; 15 cursor: pointer; 16 text-align: center; 17 font-size: 20px; 18 } 19 20 21 22 //获取ul中所有的li,有鼠标进入事件,鼠标离开事件,点击事件 23 // $(function () { 24 // //获取ul->li 25 // $("ul>li").mouseenter(function () { 26 // $(this).css("backgroundColor","red").siblings().css("backgroundColor",""); 27 // }).mouseleave(function () { 28 // $(this).css("backgroundColor","").siblings().css("backgroundColor",""); 29 // }).click(function () { 30 // //当前元素前面的所有兄弟元素背景颜色为黄色 31 // //$(this).prevAll().css("backgroundColor","yellow"); 32 // //当前元素后面的所有兄弟元素背景颜色为蓝色 33 // //$(this).nextAll().css("backgroundColor","blue"); 34 // 35 // //链式编程代码 36 // //断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了, 37 // //解决断链--->恢复到断链之前的一个效果--修复断链 38 // //.end()方法恢复到断链之前的效果 39 // $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue"); 40 // }); 41 // }); 42 43 $(function(){ 44 //链式编程 鼠标进入--鼠标点击--鼠标移出 45 //$("ul>li").mouseover().click().mouseout(); 46 $("ul>li").mouseover(function(){ 47 $(this).css("backgroundColor","red").siblings("li").css("backgroundColor",""); 48 }).click(function(){ 49 $(this).prevAll().css("backgroundColor","yellow"); 50 $(this).nextAll().css("backgroundColor","blue"); 51 }).mouseout(function(){ 52 $("ul>li").css("backgroundColor",""); 53 }); 54 }); 55 56 57 58 59 青岛啤酒(TsingTao) 60 瓦伦丁(Wurenbacher) 61 雪花(SNOW) 62 奥丁格教士(Franziskaner) 63 科罗娜喜力柏龙(Paulaner) 64 嘉士伯Kaiserdom 65 罗斯福(Rochefort) 66 粉象(Delirium) 67 爱士堡(Eichbaum) 68 哈尔滨牌蓝带 69 70 71 72注意: 上述代码第49、50行可以压缩成一行,这样就引入了一个新的方法 end();作用是恢复短链。 原来两行代码: $(this).prevAll().css("backgroundColor","yellow"); $(this).nextAll().css("backgroundColor","blue"); 修改后代码: $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue"); |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |